import type ButtonProp from "../type/ButtonProp.ts";
import {computed, onMounted, ref, watchEffect} from "vue";
import {adjustBrightness} from "@/components/utils.ts";

/**
 * created by yangtong on 2025/6/16 下午9:46
 * <br/>
 * 按钮样式
 */
export default function useStyle($prop: ButtonProp) {

    /**
     * 颜色配置
     */
    const colorMap = {
        primary: '--primary-color',
        success: '--success-color',
        warning: '--warning-color',
        danger: '--danger-color',
        info: '--info-color',
        //七彩类型需要单独处理
        rainbow: 'rainbow'
    }

    /**
     * 按钮尺寸配置
     */
    const sizeConfig = {
        tiny: {
            padding: "0 4px",
            fontSize: "12px",
            minHeight: "20px",
            circlePadding: "4px"
        },
        small: {
            padding: "1px 8px",
            fontSize: "13px",
            minHeight: "24px",
            circlePadding: "8px"
        },
        medium: {
            padding: "2px 12px",
            fontSize: "14px",
            minHeight: "28px",
            circlePadding: "12px"
        },
        large: {
            padding: "6px 20px",
            fontSize: "16px",
            minHeight: "40px",
            circlePadding: "20px"
        }
    }

    /**
     * 获取 CSS 变量值
     */
    const cssVariableCache = new Map<string, string>()
    const getCSSVariable = (variable: string): string => {
        if (!cssVariableCache.has(variable)) {
            const value = getComputedStyle(document.documentElement)
                .getPropertyValue(variable)
                .trim()
            cssVariableCache.set(variable, value)
        }
        return cssVariableCache.get(variable)!
    }

    // 尺寸相关的计算属性
    const currentSizeConfig = computed(() => sizeConfig[$prop.pageSize!])
    const padding = computed(() =>
        $prop.circle ? currentSizeConfig.value.circlePadding : currentSizeConfig.value.padding
    )
    const fontSize = computed(() => currentSizeConfig.value.fontSize)
    const minHeight = computed(() => currentSizeConfig.value.minHeight)
    const minWidth = computed(() => $prop.circle ? currentSizeConfig.value.minHeight : 'auto')

    // 颜色相关的响应式变量
    const baseColor = ref('')
    const textColor = ref('')
    const backgroundColor = ref('')
    const borderColor = ref('')
    const textColorHover = ref('')
    const backgroundColorHover = ref('')
    const borderColorHover = ref('')
    const textColorActive = ref('')
    const backgroundColorActive = ref('')
    const borderColorActive = ref('')

    //当前应该使用的颜色
    const currentColor = computed(() => {
        // 七彩类型直接返回标识符，不走 CSS 变量
        if ($prop.type === 'rainbow') {
            return 'rainbow'
        }
        return $prop.color ?? getCSSVariable(colorMap[$prop.type!])
    })

    // 计算颜色
    const computeColors = () => {
        const themeColor = currentColor.value

        //七彩按钮
        if ($prop.type === 'rainbow' || themeColor === 'rainbow') {
            // 先定义所有渐变
            const rainbowGradient = 'linear-gradient(45deg, #ff6b6b, #ffa726, #ffeb3b, #66bb6a, #42a5f5, #ab47bc, #ff6b6b)'
            const rainbowGradientHover = 'linear-gradient(90deg, #ff6b6b, #ffa726, #ffeb3b, #66bb6a, #42a5f5, #ab47bc, #ff6b6b)'
            const rainbowGradientActive = 'linear-gradient(135deg, #ff6b6b, #ffa726, #ffeb3b, #66bb6a, #42a5f5, #ab47bc, #ff6b6b)'

            if ($prop.text) {
                // 七彩文本按钮 - 文字需要用透明色
                textColor.value = 'transparent'  // 改为透明
                textColorHover.value = 'transparent'
                textColorActive.value = 'transparent'

                backgroundColor.value = 'transparent'
                backgroundColorHover.value = 'transparent'
                backgroundColorActive.value = 'transparent'

                borderColor.value = 'transparent'
                borderColorHover.value = 'transparent'
                borderColorActive.value = 'transparent'

                // 添加背景渐变（用于文字效果）
                baseColor.value = rainbowGradient
            } else if ($prop.ghost) {
                // 七彩幽灵按钮
                textColor.value = 'transparent'  // 改为透明
                textColorHover.value = 'transparent'
                textColorActive.value = 'transparent'

                backgroundColor.value = 'transparent'
                backgroundColorHover.value = 'transparent'
                backgroundColorActive.value = 'transparent'

                borderColor.value = rainbowGradient
                borderColorHover.value = rainbowGradientHover
                borderColorActive.value = rainbowGradientActive

                // 添加背景渐变（用于文字效果）
                baseColor.value = rainbowGradient
            } else {
                // 七彩实体按钮
                textColor.value = '#FFF'
                textColorHover.value = '#FFF'
                textColorActive.value = '#FFF'

                backgroundColor.value = rainbowGradient
                backgroundColorHover.value = rainbowGradientHover
                backgroundColorActive.value = rainbowGradientActive

                borderColor.value = 'transparent'  // 实体按钮不需要边框
                borderColorHover.value = 'transparent'
                borderColorActive.value = 'transparent'
            }
        }
        // 文本按钮，只有文字有颜色，背景和边框都是透明色
        else if ($prop.text) {
            textColor.value = themeColor
            textColorHover.value = adjustBrightness(themeColor, 10)
            textColorActive.value = adjustBrightness(themeColor, -15)

            backgroundColor.value = 'transparent'
            backgroundColorHover.value = 'transparent'
            backgroundColorActive.value = 'transparent'

            borderColor.value = 'transparent'
            borderColorHover.value = 'transparent'
            borderColorActive.value = 'transparent'
        }
        // 幽灵按钮，背景为透明色，文字和边框有颜色
        else if ($prop.ghost) {
            textColor.value = themeColor
            textColorHover.value = adjustBrightness(themeColor, 10)
            textColorActive.value = adjustBrightness(themeColor, -15)

            borderColor.value = themeColor
            borderColorHover.value = adjustBrightness(themeColor, 10)
            borderColorActive.value = adjustBrightness(themeColor, -15)

            // 幽灵按钮的背景为透明
            backgroundColor.value = 'transparent'
            backgroundColorHover.value = 'transparent'
            backgroundColorActive.value = 'transparent'
        }
        // 实体按钮，文字固定为白色，边框和背景为彩色
        else {
            textColor.value = '#FFF'
            textColorHover.value = '#FFF'
            textColorActive.value = '#FFF'

            backgroundColor.value = themeColor
            backgroundColorHover.value = adjustBrightness(themeColor, 10)
            backgroundColorActive.value = adjustBrightness(themeColor, -10)

            borderColor.value = themeColor
            borderColorHover.value = adjustBrightness(themeColor, 10)
            borderColorActive.value = adjustBrightness(themeColor, -10)
        }
    }

    // 组件挂载时计算颜色
    onMounted(() => {
        computeColors()
    })

    // 监听 props 变化重新计算颜色
    watchEffect(() => {
        computeColors()
    })

    return {
        padding,
        fontSize,
        minHeight,
        minWidth,
        textColor,
        backgroundColor,
        borderColor,
        textColorHover,
        backgroundColorHover,
        borderColorHover,
        textColorActive,
        backgroundColorActive,
        borderColorActive,
    }
}